<template>
	<view>
		<Sticky :propsList="stickyItems"></Sticky>
		<TopicList :list="list" :page="page"></TopicList>
		<view class="btn-create-topic">
		  <icon @tap="gotoCreate" class="iconfont icon-plus" size="40" />
		</view>
	</view>
</template>

<script>
	import TopicList from '../../components/topic-list.vue'
	import Sticky from '../../components/sticky.vue'
	import ListOptions from '../../minxins/list-options.js'
	export default {
		data() {
			return {
				page: 'forum-topic',
				stickyItems: []
			}
		},
		mixins: [ListOptions],
		components: {
			TopicList, Sticky
		},
		async onLoad(options) {
			this.options = Object.assign({}, this.options, options)
			try {
				let title = options.name
				uni.setNavigationBarTitle({
					title: `${title}版块`
				})
				let result = await this.fetchPageData()
				this.renderPage(result)
			} catch (error) {
				
			}
		},
		methods: {
			async fetchPageData(type = '') {
				if (type != 'onReachBottom') {
					this.$api.listStickyTopic({"fid": this.options.fid}).then(response => {
						this.stickyItems = response.data
					})
				}
				return this.$api.listTopic(this.options);
			},
			gotoCreate(e) {
				uni.navigateTo({
				    url: "/pages/create/create?title=发布到" + this.options.name + "版块&fid=" + this.options.fid + "&action=create_topic"
				})
			}
		},
		onShow() {
			let newTopic = this.$store.getters.getNewTopic
			console.log(`onShow, newTopic: `, newTopic)
			if (!newTopic) {
				return;
			}
			this.list.unshift(newTopic)
			this.$store.commit('setNewTopic', null)
			uni.navigateTo({
				url: '/pages/topic-comment/topic-comment?tid=' + newTopic.id
			})
		}
		
	}
</script>

<style lang="scss">
.btn-create-topic {
  position: fixed;
  right: 60upx;
  bottom: 60upx;
  .icon-plus {
    font-size: 80upx;
    color: green;
  }
}
</style>
